<template>
  <div>
    <el-tag :type="tagclass">{{ tagtext }}</el-tag>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'StatusTag',
  components: {    
  },
  props:{
    status: {
      required: true
    }
  },

  data(){
    return {
      tagclass: "info",
      tagtext: ""
    }
  },

  methods:{
    init(){
      if (this.status == 0) {
        this.tagclass = "success";
        this.tagtext = "启用中";
      } else if (this.status == 1) {
        this.tagclass = "warning";
        this.tagtext = "未启用";
      } else if (this.status == 2) {
        this.tagclass = "info";
        this.tagtext = "已删除";
      }else if (this.status == 3) {
        this.tagclass = "info";
        this.tagtext = "审核中";
      } else {
        this.tagclass = "info";
        this.tagtext = "未定义";
      }
    },
  },

  computed:{
  },

  watch: {
    status(){
      this.init();
    }
  },

  mounted(){
    this.init();
  },


  setup(){    

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

.btn-box{
  width: 100%;
}

</style>
